<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="renderer" content="webkit|ie-comp|ie-stand">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <title>预收付款</title>
</head>

<body>
  <div id="app" v-loading.fullscreen.lock="loading">
    <div class="advance-payment">
      <search-btn-view btn-text="查询" @before-open="resetSearch" @search="searchData">
        <template slot="append">
          <el-button size="medium" type="primary" @click="addPayment">新增预付款</el-button>
          <template v-if="selectPaymentList.length>0">
            <el-button size="medium" type="primary" @click="batchApproval(1)">批量审批</el-button>
            <el-button size="medium" type="danger" @click="batchApproval(2)">批量退回</el-button>
          </template>
        </template>
        <div slot="search-content">
          <search-form ref="searchForm" :search="search"></search-form>
        </div>
      </search-btn-view>
      <div class="advance-payment-table-div">
        <el-table fit stripe border :data="paymentList" style="width: 100%" height="parent" @selection-change="selectionChange"
          :row-class-name="setRowClassName">
          <el-table-column :resizable="false" width="40px" type="selection" align="center" :selectable="checkSelectable" fixed="left">
          </el-table-column>
          <el-table-column :resizable="false" label="收付款类型" width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('warehouseBalance.detail.type.'+scope.row.type)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="预收付款金额" prop="sumMoney" min-width="120px" align="center"></el-table-column>
          <el-table-column label="预收付款方" prop="receviePaymentUserName" min-width="120px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="用途" width="100px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('financeMgr.advancePayment.source.'+scope.row.source)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="用途描述" prop="sourceStr" min-width="120px" header-align="center"></el-table-column>
          <el-table-column label="合同编号" prop="advanceNo" min-width="120px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="预收付款日期" width="100px" align="center">
            <template slot-scope="scope">
              <span>{{moment(scope.row.paymentDay).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column label="银行卡号" prop="relationBank" min-width="160px" header-align="center"></el-table-column>
          <el-table-column label="所属银行" prop="bank" min-width="120px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="状态" min-width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('financeMgr.advancePayment.status.'+scope.row.status)}}</span>
            </template>
          </el-table-column>
          <el-table-column label="审核人" prop="approvalUser" min-width="120px" header-align="center"></el-table-column>
          <el-table-column :resizable="false" label="审核日期" width="100px" align="center">
            <template slot-scope="scope">
              <span v-if="scope.row.approvalTime!==''">{{moment(scope.row.approvalTime).format('YYYY-MM-DD')}}</span>
            </template>
          </el-table-column>
          <el-table-column :resizable="false" label="是否使用" min-width="80px" align="center">
            <template slot-scope="scope">
              <span>{{i18n.getMsg('financeMgr.advancePayment.isUsed.'+scope.row.isUsed)}}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog :title="formType==='add'?'新增预收付款':'修改预收付款'" :visible.sync="openForm" width="600px" top="10vh" @closed="formClosed">
      <div style="height:calc(80vh - 54px);overflow:auto">
        <advance-payment-form v-if="openForm" :type="formType" :payment="selectPayment" :dropdown-option="dropdownOption"
          @payment-success="paymentSuccess">
        </advance-payment-form>
      </div>
    </el-dialog>
  </div>
</body>

<script src="../../myJs/importFile.js"></script>
<script>
  importFile([
    "/vueSystem/components/css/sysCommonSearch.css",
    "/vueSystem/components/css/searchBtnView.css",
    "./css/advancePaymentForm.css"
  ], [
    "/vueSystem/i18n/index.js",
    "/vueSystem/components/sysCommonSearch.js",
    "/vueSystem/components/searchBtnView.js",
    "/vueSystem/components/filterSelect.js",
    "/vueSystem/mixins/datePickerOptionsMixin.js",
    "/vueSystem/models/baseModel.js",
  ]);

</script>

<script src="./searchForm.js"></script>
<script src="./advancePaymentForm.js"></script>

<script>
  var app = new Vue({
    el: '#app',
    data: function () {
      var search = {
        type: '',
        payDayStart: null,
        payDayEnd: null,
        startDate: null,
        endDate: null,
        receviePaymentUserName: '',
        source: '',
        sourceStr: '',
        advanceNo: '',
        relationBank: '',
        bank: '',
        status: '',
        isUsed: ''
      };
      return {
        loading: false,
        paymentList: [],
        search: _.cloneDeep(search),
        oldSearch: _.cloneDeep(search),
        selectPaymentList: [],
        pagination: {
          currentPage: 1,
          totalCount: 0,
          pageSize: 10
        },
        openForm: false,
        formType: '',
        selectPayment: null,
        dropdownOption: {}
      };
    },

    created: function () {
      this.setPaymentList(true);
    },

    methods: {
      setPaymentList: function (isSearch) {
        if (!isSearch) {
          this.search = _.cloneDeep(this.oldSearch);
        }

        var pagination = this.pagination;
        var currentPage = pagination.currentPage;
        var pageSize = pagination.pageSize;
        var start = (currentPage - 1) * pageSize;
        var postData = {
          start: start,
          length: pageSize,
        };

        this.setPostData(postData);

        this.loading = true;
        var self = this;
        return ajaxRequest('finance/getAdvancePayRecord', postData).then(function (res) {
          if (isSearch) {
            self.oldSearch = _.cloneDeep(self.search);
          }

          res = res.pageData;
          var paymentList = res.returnData;
          for (var i = 0; i < paymentList.length; i++) {
            var payment = paymentList[i];
            var approvalTime = payment.approvalTime;
            if (SysUtil.isEmpty(approvalTime)) {
              approvalTime = '';
            } else {
              approvalTime = moment(approvalTime).valueOf();
            }
            payment.approvalTime = approvalTime;
          }

          self.paymentList = paymentList;
          self.pagination.totalCount = res.iTotalRecords;
          self.loading = false;
          return true;
        }).catch(function () {
          self.loading = false;
          return false;
        });
      },

      setPostData: function (postData) {
        var search = this.search;
        SysUtil.setPostData(postData, search, ['type', 'status', 'isUsed']);

        var fields = ['receviePaymentUserName', 'source', 'sourceStr', 'advanceNo', 'relationBank', 'bank'];
        for (var i = 0; i < fields.length; i++) {
          var field = fields[i];
          var obj = search[field];
          if (obj !== '') {
            postData[field] = obj[field]
          }
        }

        var dateFields = ['payDayStart', 'payDayEnd', 'startDate', 'endDate'];
        for (var i = 0; i < dateFields.length; i++) {
          var dateField = dateFields[i];
          var time = search[dateField];
          if (time !== null) {
            postData[dateField] = moment(time).format('YYYY-MM-DD');
          }
        }
      },

      resetSearch: function () {
        this.search = _.cloneDeep(this.oldSearch);
      },

      searchData: function () {
        this.pagination.currentPage = 1;
        this.setPaymentList(true);
      },

      addPayment: function () {
        this.formType = 'add';
        this.openForm = true;
      },

      paymentSuccess: function () {
        this.openForm = false;
        var self = this;
        this.setPaymentList().then(function(flag){
          if (flag) {
            self.$refs['searchForm'].resetDropdownData();
          }
        });
      },

      formClosed: function () {
        this.formType = '';
        this.selectPayment = null;
      },

      checkSelectable: function (payment) {
        return payment.status === 0 && payment.isCanApproval === 1;
      },

      selectionChange: function (paymentList) {
        this.selectPaymentList = paymentList;
      },

      batchApproval: function (status) {
        var paymentList = this.selectPaymentList;
        if (paymentList.length === 0) {
          return;
        }

        var ids = _.map(paymentList, 'id');
        this.loading = true;
        var self = this;
        ajaxRequest('finance/approvalAdvancePayBatch', {
          idArray: JSON.stringify(ids),
          status: status
        }).then(function () {
          self.loading = false;
          var msg = status === 1 ? '批量审批通过成功' : '批量退回成功';
          self.$alert(msg, '信息', {
            callback: function () {
              self.setPaymentList();
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      setRowClassName: function (option) {
        var payment = option.row;
        if (payment.status === 1 && payment.isUsed === 1) {
          return 'payment-used';
        }
        return '';
      }
    },

    components: {
      SearchBtnView: SearchBtnView,
      SearchForm: SearchForm,
      AdvancePaymentForm: AdvancePaymentForm
    }
  });

</script>

<style>
  .advance-payment {
    padding: 10px 20px 5px;
    height: calc(100% - 15px);
    display: flex;
    flex-direction: column;
  }

  .advance-payment .advance-payment-table-div {
    flex: 1;
    overflow: auto;
  }

  .advance-payment .advance-payment-table-div .el-table tr.payment-used td {
    background: #bbbbbb;
  }

</style>

</html>
